<template>
  <!-- 商品规格 -->
  <div class="specification">
    <div style="height: 10px"></div>
    <ul class="content">
      <li @click="abtn">
        <div class="tltile"><span>选择</span></div>
        <div class="chichu" @click="mings">
          <!-- 尺码 -->
          <div class="size">
            <span>选择规格</span>
            <div class="Individualsize">
              <span>规格尺寸</span>
              <div class="jianto">
                <img src="../../assets/syb.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="delivertltile"><span>发货</span></div>
        <div class="chichu">
          <!-- 尺码 -->
          <div class="didian">
            <span>浙江温州</span>
            <span>|</span>
            <span>快递~免运费</span>
          </div>
          <div class="fahuo">
            <span>付款后24小时发货</span>
          </div>
        </div>
        <div class="jianto">
          <img src="../../assets/syb.png" alt="" />
        </div>
      </li>
      <li>
        <div class="safeguard"><span>保障</span></div>
        <div class="deliver">
          <!-- 尺码 -->
          <div class="didian">
            <span>付款后24小时发货</span>
            <span>*</span>
            <span>15天退货</span>
            <span>免运险</span>
          </div>
        </div>
        <div class="jianto">
          <img src="../../assets/syb.png" alt="" />
        </div>
      </li>
      <li>
        <div class="parameter"><span>参数</span></div>
        <div class="chichu">
          <!-- 尺码 -->
          <div class="didian">
            <span>品牌</span>
            <span>功能......</span>
          </div>
        </div>
        <div class="jianto">
          <img src="../../assets/syb.png" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import eventVue from "../../assets/zizhujian/index";
export default {
  name: "specification",
  data(){
    return{
      show:true,
    }
  },
  methods:{
     abtn: function () {
      eventVue.$emit("myFun", this.show); //$emit这个方法会触发一个事件
    },
    mings(){
      console.log("12345686")
    }
  }
};
</script>

<style lang="less" scoped>
.specification {
  // margin: 5px 5px 5px 5px;
  // border: 1px solid #000;
  .content {
    // height: 50px;
    // padding-bottom: 10px;

    margin: 5px 8px 8px 8px;
    li {
      display: flex;

      .tltile {
        width: 40px;
        height: 40px;
        // border: 1px solid #000;
        color: rgb(107, 107, 107);
      }
      .safeguard {
        width: 40px;
        height: 30px;
        // border: 1px solid #000;
        color: rgb(107, 107, 107);
      }
      .parameter {
        width: 40px;
        height: 20px;
        // border: 1px solid #000;
        color: rgb(107, 107, 107);
        // border: 1px solid #000;
      }
      .jianto {
        transform: rotate(180deg);
        width: 10px;
        height: 10px;
        //  border: 1px solid #000;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .delivertltile {
        width: 40px;
        height: 50px;
        // border: 1px solid #000;
        color: rgb(107, 107, 107);
      }

      .fahuo {
        height: 30px;
        line-height: 30px;
        //   border: 1px solid #000;
      }

      .deliver {
        flex: 1;
        .didian {
          span {
            &:nth-child(1) {
              margin-right: 10px;
            }
            &:nth-child(2) {
              margin-right: 10px;
              color: rgb(190, 190, 190);
            }
            &:nth-child(3) {
              margin-right: 10px;
              color: rgb(190, 190, 190);
            }
          }
        }
      }

      .chichu {
        flex: 1;
        // border: 1px solid #000;
        .size {
          display: flex;
          height: 15px;
          justify-content: space-between;
          //   border: 1px solid #000;
          .Individualsize {
            // border: 1px solid #000;
            // width: 100px;
            span {
              margin-right: 10px;
            }
            display: flex;

            color: rgb(107, 107, 107);
          }
        }
        .imgs {
          flex: 1;
          height: 50px;
          //   border: 1px solid #000;
          display: flex;
          li {
            &:nth-child(1) {
              width: 40px;
              height: 40px;
              margin-right: 5px;
            }
            &:nth-child(2) {
              width: 40px;
              height: 40px;
              margin-right: 5px;
              //   border: 1px solid #000;
            }
            &:nth-child(3) {
              width: 40px;
              height: 40px;
              margin-right: 5px;
            }
            &:nth-child(4) {
              display: flex;
              align-items: center;
              height: 40px;
              span {
                display: block;
                background-color: rgba(221, 221, 221, 0.404);
                height: 30px;
                color: rgb(116, 116, 116);
                text-align: center;
                line-height: 30px;
                padding-right: 5px;
                padding-left: 5px;
                border-radius: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
